<template>
	<mescroll-uni :up="upOption" :down="downOption" @down="downCallback" @up="upCallback" @scroll="scrollPause">
		<view v-for="(item, index) in articleArry" :key="index" class="width100" style="flex-wrap: wrap;">
			<general-card :tltle="item.author.nickname" :avatar="item.author.avatar_url" :note="item.author.signature">
				<view class="title" @click="go_details(item)">
					<text>{{ item.content }}</text>
				</view>
				<view class="close" slot="header_right_extend"><text class="iconfont icon-guanbi" @click="removeSlef"></text></view>
				<view class="medias" slot="body_extend" v-if="item.files[0]">
					<single-media class="width100" v-if="item.files.length < 2" :isImage="item.files[0].file_type === 0" :file="item.files[0]"
					 maxWidth="450" @playVideo.stop="playVideo" />
					<media-scratchable-latex class="width100" v-else :files="item.files" :width="670" space="1" />
				</view>
				<!-- card_extend -->
				<view class="good_comments" slot="card_extend" v-if="item.good_comment.length" @click="go_details(item)">
					<view class="good_comments_title">神评</view>
					<view class="commnet_content" v-for="(good_comment, gindex) in item.good_comment" :key="gindex">
						<view class="content">
							<view class="nick_name">{{ good_comment.nickname }}:</view>
							<view class="article_text">{{ good_comment.comment }}</view>
						</view>
						<view class="go_icon"><text class="iconfont icon-b-2"></text></view>
					</view>
				</view>
				<!-- foot left Action Extend -->
				<GeneralThumbUp slot="foot_left_extend" class="width100" @likeClick="likeClick" :like_status="item.like_status"
				 :likes="item.likes" :index="index"></GeneralThumbUp>
				<!-- foot right action extend -->
				<view class="right_action" slot="foot_right_extend">
					<view class="iconfont icon-daipingjia" @click="go_details(item)">
						<text style="font-size: 28rpx;">{{ item.comments }}</text>
					</view>
					<text class="iconfont icon-shoucang"></text>
					<!-- <button class="btn" :id="index" open-type="share"><text class="iconfont icon-fenxiang"></text></button> -->
					<text class="iconfont icon-fenxiang" @click="share_article(index)"></text>
				</view>
			</general-card>
			<view v-if="index % 15 === 0 && index !== 0" class="ad_class">
				<!-- #ifdef MP-QQ -->
				<ad unit-id="e80f3734e7158a12c28d7d97f236fdf5"></ad>
				<!-- #endif -->
			</view>
		</view>

		<view class="addPost" @click="go_post"></view>
		<uni-popup ref="popup" type="bottom" class="bottom_popup">
			<view class="popup_content">
				<view class="popup_content__top">
					分享到
				</view>
				<button type="primary" open-type="share">分享到好友</button>
			</view>
		</uni-popup>
	</mescroll-uni>
</template>

<script>
	import {
		throttle
	} from '../../utils/DebouchAndThrottl.js';
	import GeneralCard from '../../components/commonComponent/GeneralCard.vue';
	import GeneralThumbUp from '../../components/commonComponent/GeneralThumbUp.vue';
	import GeneralSkeleton from '../../components/commonComponent/GeneralSkeleton.vue';
	import MescrollUni from '../../components/mescroll-uni/mescroll-uni.vue';
	import mediaScratchableLatex from '../../components/mediaComponents/mediaScratchableLatex.vue';
	import singleMedia from '../../components/mediaComponents/singleMedia.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			GeneralCard,
			GeneralThumbUp,
			GeneralSkeleton,
			MescrollUni,
			mediaScratchableLatex,
			singleMedia,
			uniPopup
		},
		data() {
			return {
				articleArry: [],
				videoContext: null,
				palyStatus: false,
				lastTime: null,
				oldScrollTop: 0,
				share_index: 0,
				upOption: {
					onScroll: true,
					use: true, // 是否启用上拉加载; 默认true
					isBounce: true, // 开启浏览器touchmove事件
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					offset: 2000, //距离底部还有200px时开始加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					textLoading: '正在寻找脑洞—_—',
					textNoMore: '脑洞枯竭了，快去分享一下你的脑洞吧'
				},
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				}
			};
		},
		onShareAppMessage(res) {
			let title = '笑死我了，赶快来看看';
			// let url = '/pages/index/articleDetails?aid=' + this.share_id
			let url = '/pages/index/articleDetails?data=' + encodeURIComponent(JSON.stringify(this.articleArry[this.share_index]));
			this.$refs.popup.close();
			return {
				title: title,
				path: url,
				scene: "WXSenceTimeline"
			};
		},
		methods: {
			downCallback(mescroll) {
				this.articleArry = [];
				mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				//上滑加载

				let pageNum = mescroll.num;
				let pageSize = mescroll.size;
				let time = mescroll.time || '';
				let data = {
					size: pageSize,
					page: pageNum
				};
				if (pageNum > 1) {
					data['time'] = time;
				}
				this.$http
					.get('/api/article/ivarticle/', {
						data
					})
					.then(response => {
						let time = response.data.result.time;
						let next = response.data.result.next;
						let results = response.data.result.results;

						if (response.statusCode === 200) {
							if (next) {
								next = true;
							} else {
								next = false;
							}
							if (pageNum === 1) {
								this.articleArry = results;
							} else {
								this.articleArry = this.articleArry.concat(results);
							}
							mescroll.endSuccess(results.length, next, time);
						} else {
							uni.showToast({
								title: '发错错误：' + response.statusCode + '，重新试试吧！',
								icon: 'none'
							});
						}
					})
					.catch(error => {
						mescroll.endErr();
					});
			},
			removeSlef(index) {
				// 删除按钮点击事件
				this.articleArry.splice(index, 1);
			},
			likeClick: throttle(function(like_type, index) {
				if (!this.$store.state.login.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.switchTab({
						url: '../user/index'
					});
					return;
				}
				this.$http
					.request({
						url: '/api/article/action/',
						method: 'post',
						data: {
							aid: this.articleArry[index].pk,
							like_type: like_type,
							action: 'add_like'
						}
					})
					.then(res => {
						this.articleArry[index].like_status = res.data.result;
						if (this.articleArry[index].like_status.up) {
							this.articleArry[index].likes++;
						} else {
							this.articleArry[index].likes--;
						}
					});
			}, 1000),
			upOrDown(status) {
				if (status.down != status.up) {
					if (status.down) {
						return 1;
					} else {
						return 0;
					}
				} else {
					return 0;
				}
			},
			playVideo(videoContext) {
				// 点击播放视频后的事件
				this.palyStatus = true; //设置播放状态
				if (!this.videoContext) {
					// 没有播放的话 直接设置视频控制上下文
					this.videoContext = videoContext;
				}
				if (this.videoContext != videoContext) {
					// 先暂停上一个再播放本次的
					this.videoContext.pause();
					this.videoContext = videoContext;
				}
			},
			scrollPause: throttle(function(mescroll) {
				// 列表滑动事件, 停止播放 防止可视区域超过视频了还在播放
				if (this.videoContext) {
					let nowScrollTop = mescroll.scrollTop - this.oldScrollTop;
					console.log(mescroll, '本次移动' + nowScrollTop);
					if (this.palyStatus && !(nowScrollTop < -50 || nowScrollTop < 50)) {
						this.videoContext.pause();
						this.palyStatus = false;
					}
					this.oldScrollTop = mescroll.scrollTop;
				}
			}, 250),
			go_post: throttle(function() {
				// 去发布界面
				uni.navigateTo({
					url: '../post/post_file_articles'
				});
			}, 1000),
			go_details: throttle(function(item) {
				// 去详情界面
				uni.navigateTo({
					url: 'articleDetails?data=' + encodeURIComponent(JSON.stringify(item))
				});
			}, 1000),
			share_article: throttle(function(index) {
				// 去详情界面
				this.$refs.popup.open()
				this.share_index = index;
			}, 1000),
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
		height: 100%;
	}

	// Article CSS
	.ad_class {
		width: 100%;
		flex-wrap: wrap;
		margin: 5rpx 0;
	}

	general-card {
		width: 100%;
		flex-wrap: wrap;
		margin-bottom: 10rpx;

		.title {
			width: 100%;
			flex-wrap: wrap;
			margin-bottom: 15rpx;
		}

		.close {
			height: 100%;
			align-items: center;
		}

		.medias {
			width: 100%;
		}

		.good_comments {
			width: calc(100% - 70rpx);
			padding: 0 35rpx;
			flex-wrap: wrap;

			.good_comments_title {
				background-color: #f5f5f5;
				width: calc(100% - 15rpx);
				flex-shrink: 0;
				color: white;
				font-size: 35rpx;
				color: #139dfe;
				padding-left: 15rpx;
			}

			.commnet_content {
				width: 100%;
				align-items: center;
				background-color: #f5f5f5;
				padding: 0 10rpx 10rpx 10rpx;

				.content {
					padding-left: 20rpx;
					width: calc(100% - 60rpx);
					flex-wrap: wrap;

					view {
						width: 100%;
						flex-shrink: 0;
					}

					.nick_name {
						color: #646464;
						font-size: 35rpx;
					}

					.article_text {
						font-size: 30rpx;
						color: #9c9ea9;
						padding-left: 20rpx;
					}
				}

				.go_icon {
					width: 60rpx;
					align-items: center;
				}
			}
		}

		.left_action {
			height: 55rpx;
			border-radius: 50rpx;
			background-color: #139dfe;

			.after_action {
				height: 100%;
				align-items: center;
				padding: 0 20rpx;

				.icon-up,
				.icon-down {
					font-size: 38rpx;
					font-weight: 600;
					color: white;
				}

				.up_text {
					font-size: 30rpx;
					color: white;
				}
			}

			.before_action {
				height: 100%;
				align-items: center;

				.up {
					height: 100%;
					align-items: center;
					margin-left: 10rpx;

					.icon-up {
						font-size: 38rpx;
						font-weight: 600;
						color: white;
					}

					.up_text {
						font-size: 30rpx;
						color: white;
					}
				}

				.hrs {
					height: 55%;
					border-left: 1rpx #fff solid;
					margin: 0 10rpx;
				}

				.down {
					padding-right: 10rpx;
					align-items: center;
					justify-content: center;

					.icon-down {
						font-size: 38rpx;
						font-weight: 600;
						color: white;
					}
				}
			}
		}

		.right_action {
			width: 265rpx;
			justify-content: space-around;
			align-items: center;

			// button::after {
			// 	border: none;
			// }

			// button {
			// 	padding: 0 !important;
			// 	margin: 0 !important;
			// 	width: 65rpx;
			// 	// height: 50rpx;
			// 	line-height: 50rpx;
			// 	font-size: 50rpx;
			// 	background-color: #fff;
			// }

			// .icon-shoucang,
			// .icon-daipingjia {
			// 	font-size: 40rpx;
			// }

			// .icon-shoucang:active,
			// .icon-daipingjia:active {
			// 	color: #555555;
			// }
		}
	}

	// Article Past Botton
	.addPost {
		z-index: 999;
		position: fixed;
		right: 20rpx;
		bottom: 198rpx;
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		box-shadow: 2rpx 2rpx 5rpx #96d1e4;
		background-color: #139dfe;
	}

	// click animation
	.addPost:active {
		bottom: 197rpx;
	}

	//  across
	.addPost::before {
		content: '';
		position: absolute;
		top: 48%;
		width: 43rpx;
		margin-left: 15rpx;
		border-top: 7rpx solid white;
	}

	// vertical
	.addPost::after {
		content: '';
		position: absolute;
		left: 46%;
		top: 22%;
		height: 43rpx;
		border-left: 7rpx solid white;
	}

	/*
	popup CSS
	*/

	.popup_content {
		padding-bottom: 20rpx;
		width: 750rpx;
		flex-wrap: wrap;
		background-color: #fff;

		.popup_content__top {
			padding-bottom: 10rpx;
			width: 100%;
			flex-shrink: 0;
			justify-content: center;
		}
	}




	// Mescroll CSS
	.mescroll-uni-content .mescroll-downwarp {
		text-align: center;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.downwarp-content {
		justify-content: center;
	}

	.mescroll-upwarp {
		text-align: center;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.mescroll-uni-content {
		flex-wrap: wrap;
	}

	.mescroll-empty {
		flex-wrap: wrap;
		justify-content: center;
	}

	.empty-tip {
		width: 100%;
		flex-shrink: 0;
		justify-content: center;
	}

	.content {
		height: 100%;
	}
</style>
